<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" :placeholder="true" bgColor="#fff" autoBack>
            <view slot="center" class="xilu_center_slot flex-box">
                <input class="fs24 cola flex-grow-1" v-model="q" @focus="searchClick" placeholder="请输入搜索的内容"></input>
                <view class="xilu_search_btn btn1" @click="searchConfirm()">搜索</view>
            </view>
        </u-navbar>
        <view class="container flex-box flex-col" v-if="!showStatus">
            <view class="flex-grow-1 w100">
                <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false">
                    <view class="pt30"></view>
                    <goodslist :list="list" :showCollect="false"></goodslist>
                    <!-- <mescroll-empty></mescroll-empty> -->
                </mescroll-uni>
            </view>
        </view>
        <view class="container" v-if="showStatus">
           <view class="p30">
               <view class="fs34 col10 fwb pb30">历史搜索</view>
               <view class="flex-box flex-wrap">
                   <view class="target" v-for="item in search_history" @click="clickHistory(item)">{{item}}</view>
               </view>
           </view>
        </view>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import goodslist from "@/components/goodslist/goodslist.vue";
    export default {
        components: {
            goodslist
        },
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
				q:'',
                list: [],
                showStatus:true,
				search_history: [],
            };
        },
		onLoad() {
			this.search_history = this.getHistorySearch();
		},
        methods: {
			searchConfirm() {
				let q = this.q;
				if (q.trim() == '') {
					uni.showToast({title:"请输入搜索内容",icon:'none'});
					return false;
				}
				//搜索列表存缓存
				this.setHistorySearch(q);
				this.showStatus = false;
				
			},
			//点击输入框则隐藏结果
			searchClick() {
				this.showStatus = true;
			},
			bindCancel() {
				this.showStatus = false;
			},
			//添加缓存搜索
			setHistorySearch(q) {
				let search_history = this.getHistorySearch();
				let index = search_history.indexOf(q);
				if (index !== -1) {
					search_history.splice(index, 1);
				}
				search_history.unshift(q.toString());
				uni.setStorageSync('search_history', JSON.stringify(search_history));
				this.search_history = this.getHistorySearch();
			},
			//获取缓存搜索
			getHistorySearch() {
				let search_history = uni.getStorageSync('search_history') || '';
				if (search_history) {
					search_history = JSON.parse(search_history);
				} else {
					search_history = [];
				}
				return search_history;
			},
			//历史搜索
			clickHistory(q) {
				this.q = q;
				//搜索列表存缓存
				this.setHistorySearch(q);
				this.showStatus = false;
				
			},
			bindClear(){
				uni.setStorageSync('search_history',null);
				this.search_history = [];
			},
			
            /*上拉加载的回调*/
            upCallback(page) {

                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let q = this.q;
                this.$core.get({
                    url: 'xilumarket.product/lists',
                    data: {
                        q: q,
                        page: pageNum,
                        pageSize: pageSize
                    },
                    success: (ret) => {
                        let data = ret.data;
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = data.data;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                        let totalPage = data.last_page;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                        //let totalSize = data.total;
                        // 接口返回的是否有下一页 (true/false)
                        //let hasNext = data.current_page;

                        //设置列表数据
                        if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
                        this.list = this.list.concat(curPageData); //追加新数据

                        // 请求成功,隐藏加载状态
                        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                        this.mescroll.endByPage(curPageLen, totalPage);

                        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                        //this.mescroll.endBySize(curPageLen, totalSize); 

                        //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                        //this.mescroll.endSuccess(curPageLen, hasNext); 

                        //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
                        //如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
                        //如果传了hasNext,则翻到第二页即可显示无更多数据.
                        //this.mescroll.endSuccess(curPageLen);

                        // 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
                        // 建议使用setTimeout,因为this.$nextTick某些情况某些机型不触发
                        setTimeout(() => {
                            this.mescroll.endSuccess(curPageLen)
                        }, 20)

                        // 上拉加载的 curPageLen 必传, 否则会一直显示'加载中...':
                        // 1. 使配置的noMoreSize 和 empty生效
                        // 2. 判断是否有下一页的首要依据:
                        //     当传的值小于page.size时(说明不满页了), 则一定会认为无更多数据;
                        // 比传入的totalPage, totalSize, hasNext具有更高的判断优先级;
                        // 3. 当传的值等于page.size时(满页), 才取totalPage, totalSize, hasNext判断是否有下一页
                        // 传totalPage, totalSize, hasNext目的是避免方法四描述的小问题

                        // 提示: 您无需额外维护页码和判断显示空布局,mescroll已自动处理好.
                        // 当您发现结果和预期不一样时, 建议再认真检查以上参数是否传正确
                    },
                    fail: () => {
                        //  请求失败,隐藏加载状态
                        this.mescroll.endErr()
                    }
                })

            },
        }
    }
</script>

<style lang="scss" scoped>
    .xilu {
        .container {
            height: calc(100vh - 44px - var(--status-bar-height));
            width: 100vw;
            min-height: auto;
            padding-bottom: 0 !important;
        }

        &_logo {
            width: 80rpx;
            height: 80rpx;
        }

        &_center_slot {
            width: 460rpx;
            height: 75rpx;
            background: #FFFFFF;
            border-radius: 40rpx;
            border: 2rpx solid #555555;
            margin-left: 96rpx;
            padding: 0 12rpx 0 20rpx;
        }

        &_bg {
            width: 750rpx;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        &_bg_block {
            width: 750rpx;
            height: calc(486rpx - 44px - var(--status-bar-height));
            background: linear-gradient(180deg, #F9C022 0%, rgba(255, 193, 0, 0) 100%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        &_search_btn {
            width: 100rpx;
            height: 56rpx;
            font-size: 24rpx;
            line-height: 56rpx;
        }
        .w100{
            width: 100vw;
        }
        .target{
            width: 120rpx;
            height: 55rpx;
            line-height: 55rpx;
            text-align: center;
            font-size: 28rpx;
            font-weight: 400;
            color: #898989;
            background: #F5F7FB;
            border-radius: 28rpx;
            margin-bottom: 30rpx;
            margin-right: 30rpx;
        }
    }
</style>